<template>
  <div class="index-container">

    <div class="home_position flexcenter">
      <span class="f_13 p_one" @click="goPage('OrderList')">订单</span>
      <div class="line"></div>
      <span class="f_13 p_two" @click="goPage('Useredit')">个人</span>
    </div>

    <div class="hometopbtn f_13">
      数额红包等你来领
      <img src="@/assets/images/homekk.png" alt="">
    </div>
    <div class="flexcenter flexcolumn homebody">
      <div class="c_707 f_13">活动规则</div>
      <div>
        <img src="@/assets/images/hometext.png" alt="" srcset="" class="imgtext">
      </div>
      <div>
        <img src="@/assets/images/homecenter.png" alt="" srcset="" class="imgcenter">
      </div>
      <div class="flexcenter">
        <div class="homecentebtn f_18">可提现金额：{{coin}}元</div>
      </div>
      <div class="flexrowbetween mt_22 hb_btn">
        <div class="homebottombtn f_16" @click="goPage('ActiveAdd')"> 参与活动 </div>
        <div class="homebottombtn btn2 f_16" @click="handleTx">立即提现</div>
      </div>
      
    </div>
    <div class="home_botttom flexcenter flexcolumn">
      <div class="c_707 f_13" style="margin-bottom:14px" @click="goPage('RulePage')">活动规则</div>
      <div class="c_707 f_13">-活动解释权归云涌传媒所有-</div>
    </div>
    <van-popup v-model="show" class='translate_pop'	>
      <div class="blocktx">
        <img src="@/assets/images/tx.png" alt="">
        <div class="flexcenter txspan flexcolumn">
          <span>提现申请已发出</span>
          <span>请耐心等待！</span>
          <div class="txbtn flexcenter" @click="show=false">确认</div>
        </div>
      </div>
      <div class="flexcenter closebox">
        <van-icon name="close" size="30" color="#fff" @click="show=false"/>
      </div>
    </van-popup>
    <!-- <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="block">
          <img src="@/assets/images/tx.png" alt="">
        </div>
      </div>
  </van-overlay> -->
  </div>
</template>

<script>
import { getUserData,subcoin } from '@/api/home';
export default {
  data() {
    return {
      loading:false,
      coin:0.00,
      show:false
    }
  },

  created(){
    this.getData();
  },
  methods: {

    getData(){
      getUserData().then(res=>{
        if(res.code == 1){
          this.coin = Number(res.data.coin).toFixed(2);
        }
      })
    },

    goPage(page){
      this.$router.push({name:page})
    },


    handleTx(){
      subcoin().then(res=>{
        if(res.code == 1){
          this.show = true;
          this.getData();
        }
      })
      
    },
    // onSubmit(){
    //     console.log('123123')
    //     this.loading = true;
    //     this.$store.dispatch('user/login',this.form).then(res=>{
    //         this.$router.push({ path: "/" });
    //         // }else{
    //         //     console.log('失败',res.msg);
    //         //     this.$toast(res.msg);
    //         // }
    //         this.loading = false;
    //     }).catch(e=>{
    //         this.loading = false;
    //     })
    // },
  }
}
</script>

<style lang="scss" scoped>
.index-container {
  width: 100%;
  min-height: 100vh;
  background-color: #EC865C;
  padding-top: 60px;
  position: relative;
}
.hometopbtn{
  margin: 0 auto;
  // margin-top: 60px;
  width: 310px;
  height: 60px;
  background: #E26B3A;
  border: 2px solid #FFFFFF;
  color: #000;
  border-radius: 56px;
  position: relative;
  text-align: center;
  line-height: 60px;
  img{
    width: 242px;
    position: absolute;
    top: 8px;
    left: 32px;
  }
}
.homebody{
  padding-top: 20px;
}
.imgtext{
  width: 656px;
}
.imgcenter{
  width: 736px;
}
.homecentebtn{
  width: 466px;
  height: 84px;
  background: url('~@/assets/images/homebtn1.png') center no-repeat;
  background-size: cover;
  margin-top: -42px;
  text-align: center;
  line-height: 80px;
  color: white;
}
.homebottombtn{
  width: 224px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background: url('~@/assets/images/homebtn2.png') center no-repeat;
  background-size: cover;
}
.btn2{
  background: url('~@/assets/images/homebtn3.png') center no-repeat;
  background-size: cover;
}
.hb_btn{
  width: 656px;
}
.home_botttom{
  margin-top: 64px;
  padding-bottom: 30px;
}
.home_position{
  width: 166px;
  height: 52px;
  position: absolute;
  top: 60px;
  right: 0;
  background-color: white;
  border-radius: 44px 0px 0px 44px;
  border: 1px solid #000000;
  border-right: 0;

  .line{
    height: 28px;
    width: 2px;
    background-color: #000;
    margin: 0 10px;
  }
  .p_one{
    position: relative;

    &::after{
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      right: 0;
      height: 10px;
      background-color: #EC865C;
      opacity: 0.6;
    }
  }
  .p_two{
    position: relative;

    &::after{
      position: absolute;
      content: '';
      bottom: 0;
      left: 0;
      right: 0;
      height: 10px;
      background-color: #F9DE72;
      opacity: 0.6;
    }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.blocktx{
  width: 454px;
  position: relative;
  img{
    width: 100%;
  }
}
.translate_pop{
  background-color: transparent;
  overflow: hidden;
}
.txspan{
  position: absolute;
  top: 270px;
  width: 100%;
  font-size: 44px;
}
.txbtn{
  background: url('~@/assets/images/homeyellowbtn.png') center no-repeat;
  width: 220px;
  height: 80px;
  background-size: contain;
  margin-top: 100px;
  font-size: 30px;
  color: #000;
  font-weight: bold;
  line-height: 30px;
}
.closebox{
  height: 50px;
  margin-top: 30px;
}
</style>
